<div id="layoutSidenav_nav">
  <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
    <div class="sb-sidenav-menu">
      <div class="nav">
        <div class="nav-extra">
          <span class="material-icons-outlined arrow-icon" *ngIf="!isAllFileCollapse" data-toggle="collapse"
            data-target="#folter">
            expand_more
          </span>
          <span class="material-icons-outlined arrow-icon" data-toggle="collapse" *ngIf="isAllFileCollapse"
            data-target="#folter">
            chevron_right
          </span>
          <a class="nav-link nav-extra" aria-expanded="true" [ngClass]="{'active-link': length==37}"
            data-toggle="collapse" data-target="#folter" role="button"
            (click)="isAllFileCollapse=!isAllFileCollapse;allFileClick(rootFolder.id)">
            {{rootFolder.name | limitTo: 20}}
          </a>
        </div>
        <ul class="sub-menu show" id="folter">
          <li class="nav-item m-2">
            <div class="treeview_root">
              <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
                <mat-tree-node matTreeNodePaddingIndent="20" *matTreeNodeDef="let node;" matTreeNodePadding>
                  <button mat-icon-button (click)="loadChildren(node)" [attr.aria-label]="'Toggle ' + node.item">
                    <mat-icon class="mat-icon-rtl-mirror">
                      {{treeControl.isExpandable(node) ? 'expand_more' : 'chevron_right'}}
                    </mat-icon>
                  </button>
                  <a class="cursor-pointer text-dark" (click)="onSelectedFolder(node)"
                    *ngIf="!treeControl.isExpandable(node)">
                    <i class="fas fa-folder text-main fs-14 mr-1"></i> {{node.name | limitTo: 20 }}
                  </a>
                  <a class="cursor-pointer text-dark" (click)="onSelectedFolder(node)"
                    *ngIf="treeControl.isExpandable(node)">
                    <i class="fas fa-folder text-main fs-14 mr-1"></i> {{node.name | limitTo: 20 }}
                  </a>
                  <mat-progress-bar *ngIf="node.isLoading" mode="indeterminate" class="example-tree-progress-bar">
                  </mat-progress-bar>
                </mat-tree-node>
              </mat-tree>
            </div>
          </li>
        </ul>
        <a class="nav-link" [routerLinkActive]="'active-link'" (click)="onRedirect('recents')"
          [routerLink]="['/recents']">
          <span class="material-icons-outlined">
            update
          </span> 最近
        </a>
        <a class="nav-link" [routerLinkActive]="'active-link'" (click)="onRedirect('starred-files')"
          [routerLink]="['/starred-files']">
          <span class="material-icons-outlined">
            star_border
          </span> 收藏
        </a>
        <a class="nav-link" [routerLinkActive]="'active-link'" (click)="onRedirect('shared-files')"
          [routerLink]="['/shared-files']">
          <span class="material-icons-outlined">
            share
          </span> 共享
        </a>
        <a class="nav-link" [routerLinkActive]="'active-link'" (click)="onRedirect('deleted-files')"
          [routerLink]="['/deleted-files']">
          <span class="material-icons-outlined">
            auto_delete
          </span> 回收站
        </a>
        <a class="nav-link mt-4 pb-0">
          <span class="material-icons-outlined">
            storage
          </span>
          总空间
        </a>
        <a class="nav-link pt-0 text-primary">
          {{totalSize | filesize }} 已用
        </a>
      </div>
    </div>
  </nav>
</div>